<template>
    <div class="sys" style="height: 50%;margin-bottom: 10px;justify-content: center;">
        <!-- <div class="title" style="width: 100% ;justify-content: center;" ><h3>参估设备运行状态</h3></div> -->
        <el-table 
            max-height="88vh" style="width: 100% ;font-size: 14px " border
            :data="sysData" 
            highlight-current-row
            ref="singleTableRef">
            <!-- <el-table-column type="selection"  width="60rem" align="center"/> -->
            <el-table-column prop="dev_id" label="设备编号" width="90rem" align="center"/>
            <el-table-column prop="sys_info.run_status" label="设备状态" width="120rem" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.sys_info.run_status == -1" type="info">
                   离线
                </el-tag>
                <el-tag v-else-if="scope.row.sys_info.run_status == 0" type="danger">
                   停止运行
                </el-tag>
                <el-tag v-else-if="scope.row.sys_info.run_status > 0" type="success">
                   处理中
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="dev_ip" label="设备IP" width="120rem" align="center">   
            </el-table-column>
            <el-table-column prop="sys_info.cpu_percent" label="CPU使用率(%)" align="center"/>
            <el-table-column prop="sys_info.gpu_percent" label="GPU使用率(%)" align="center"/>
            <el-table-column prop="sys_info.memory_percent" label="内存使用率(%)" align="center"/>
            <el-table-column prop="sys_info.disk_free" label="硬盘剩余(GB)" align="center">
              <template #default="scope">
                {{ (scope.row.sys_info.disk_free/1024/1024).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="fail_count" label="参估失败个数" align="center"/>
            <el-table-column prop="total_count" label="参估总数" align="center"/>
            <el-table-column fixed="right" label="操作" width="200rem" align="center">
              <template #default="scope"> 
                <el-button round type="success" size="small" 
                @click="startOne(scope.row.dev_id)" :disabled="scope.row.sys_info.run_status == 0 || scope.row.sys_info.run_status == -1?false:true">开始</el-button>
                <el-button round type="danger" size="small" 
                @click="stopOne(scope.row.dev_id)" :disabled="scope.row.sys_info.run_status > 0?false:true" >停止</el-button>
              </template>
            </el-table-column>
        </el-table>
    </div>    
</template>

<script setup>
import { ref,reactive,onMounted,onUnmounted } from 'vue'
import balanceApi from '@/apis/loadBalance.js'
const sysData = ref([
{
    "dev_id": 0,
    "dev_ip": " ",
    "sys_info": {
        "cpu_percent": 0,
        "disk_free": 0,
        "disk_total": 0,
        "gpu_percent": 0,
        "memory_percent": 0,
        "run_status": -1
    },
    "fail_count": 0,
    "total_count": 0
},
{
    "dev_id": 1,
    "dev_ip": " ",
    "sys_info": {
        "cpu_percent": 0,
        "disk_free": 0,
        "disk_total": 0,
        "gpu_percent": 0,
        "memory_percent": 0,
        "run_status": -1
    },
    "fail_count": 0,
    "total_count": 0
},
{
    "dev_id": 2,
    "dev_ip": " ",
    "sys_info": {
        "cpu_percent": 0,
        "disk_free": 0,
        "disk_total": 0,
        "gpu_percent": 0,
        "memory_percent": 0,
        "run_status": -1
    },
    "fail_count": 0,
    "total_count": 0
},{
    "dev_id": 3,
    "dev_ip": " ",
    "sys_info": {
        "cpu_percent": 0,
        "disk_free": 0,
        "disk_total": 0,
        "gpu_percent": 0,
        "memory_percent": 0,
        "run_status": -1
    },
    "fail_count": 0,
    "total_count": 0
},{
    "dev_id": 4,
    "dev_ip": " ",
    "sys_info": {
        "cpu_percent": 0,
        "disk_free": 0,
        "disk_total": 0,
        "gpu_percent": 0,
        "memory_percent": 0,
        "run_status": -1
    },
    "fail_count": 0,
    "total_count": 0
}])
const statData = ref([
  {
    "dev_id": 0,
    "dev_ip": " ",
    "fail_count": 0,
    "total_count": 0
},
{
    "dev_id": 1,
    "dev_ip": " ",
    "fail_count": 0,
    "total_count": 0
},
{
    "dev_id": 2,
    "dev_ip": " ",
    "fail_count": 0,
    "total_count": 0
},{
    "dev_id": 3,
    "dev_ip": " ",
    "fail_count": 0,
    "total_count": 0
},{
    "dev_id": 4,
    "dev_ip": " ",
    "sys_info": {
        "cpu_percent": 0,
        "disk_free": 0,
        "disk_total": 0,
        "gpu_percent": 0,
        "memory_percent": 0,
        "run_status": -1
    }
}])

const getSysInfo = async () => {
  const res = await balanceApi.getSysInfo()
  sysData.value = res.sys_info
  console.log(sysData.value)
}
const getStatInfo = async () => {
  const res = await balanceApi.getStatInfo()
  const data = res.stat_info
  
  for(let i=0;i<data.length;i++){
    let oneFailCount = 0
    let oneTotalCount = 0
    data[i].stat_info.forEach(item=>{
      oneFailCount += item.fail_count
      oneTotalCount += item.total_count
    })
    for(let j=0;j<sysData.value.length;j++){
      if(data[i].dev_id == sysData.value[j].dev_id){
        sysData.value[j].fail_count = oneFailCount
        sysData.value[j].total_count = oneTotalCount
        break
      }
    }
  }
}
const getAllData = async () => {
  getSysInfo()
  getStatInfo()
}
let intervalId = null
const startPolling = () => {
  intervalId = setInterval(getAllData, 5000)
}
// 停止轮询  
const stopPolling = () => {  
    clearInterval(intervalId) 
}
onMounted(() => {
  getAllData()
  startPolling()
})
onUnmounted(() => {
  stopPolling()
})

//开始
const startOne = async (id) => {
  await balanceApi.postOn({dev_id:Number(id)})
}
//停止
const stopOne = async (id) => {
  await balanceApi.postOff({dev_id:Number(id)})
}
</script>

<style scoped>

</style>